<template>
    <div class="paib-content">
        <img 
        class="img"
        :src="imageUrl"
        ref="imageRef"
      />
    </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
const imageUrl = ref('src/assets/paib.png');
// 动态样式（可根据需要修改）
const imageStyle1 = ref()

</script>

<style lang="scss" scoped>
.paib-content{
    width: 100%;
    height: 10%;
    box-sizing: border-box;
    position: relative;

    .img{
        
            position: absolute;
            width:7vw;       // 容器宽度
            height: auto;      // 自动高度保持比例
            transform: rotate(270deg); // 组合变换
            top:-50%;
            left: 15%;
          //   transformOrigin: 'left top', // 明确旋转基准点
          //   right: 0,            // 替代left定位
          //   top: '100%',         // 实现侧边旋转效果
          //   maxWidth: 'none'     // 防止宽度限制
          
    }
}

</style>